import React, {Component} from 'react';
import SaveSelect from './SaveSelect';
import SaveFormUpload from './SaveFormUpload';
import SaveEditor from './SaveEditor';
import {withRouter} from 'react-router-dom';
import http from '../../http';

class SaveForm extends Component {
	constructor(props) {
		super(props);
		this.state = {
			name: '',
			subtitle: '',
			categoryParentId: '0',
			categoryId: '0',
			subImages: [],
			detail: '',
			price: '',
			stock: '',
			status: 1,
			id: '',
			flag: false,
			onlyRead: false
		}
	}

	componentDidMount() {
		if (this.props.match.params.id) {
			this.getUpdateProduct();
		}
		let onlyRead = this.props.match.path === "/product/detail/:id";
		this.setState({
			onlyRead
		})
	}

	getUpdateProduct = () => {
		let id = this.props.match.params.id;
		http.getProductDetail(id).then(res => {
			if (res.status === 0) {
				let {categoryId, name, subtitle, parentCategoryId, price, stock, detail, subImages, imageHost, id} = res.data;
				let list = [];
				if (subImages) {
					list = subImages.split(',');
				}
				this.setState({
					categoryId,
					categoryParentId: parentCategoryId,
					name,
					subtitle,
					price,
					stock,
					detail,
					id,
					subImages: list.map(item => {
						return {
							uri: item,
							url: imageHost + item
						}
					}),
					flag: true
				})
			}
		}).then(() => {
			this.setState({
				flag: false
			})
		})
	};

	formSubmit = () => {
		if (!this.formVerify()) {
			return false;
		}
		let data = Object.assign({}, this.state);
		if (data.categoryParentId !== "0" && data.categoryId === "0") {
			data.categoryId = data.categoryParentId;
		}
		if (data.subImages.length > 0) {
			data.subImages = data.subImages.map(item => {
				return item.uri
			})
		}
		if (data.id === '') {
			delete data.id;
		}
		delete data.flag;
		delete data.categoryParentId;
		http.saveProduct(data).then(res => {
			if (res.status === 0) {
				alert(res.data);
				this.props.history.push('/product');
			}
		})
	};

	formVerify = () => {
		if (this.state.name === '') {
			alert('请输入商品名称！');
			return false;
		} else if (this.state.subtitle === '') {
			alert('请输入商品描述！');
			return false;
		} else if (this.state.price === '') {
			alert('请输入商品价格！');
			return false;
		} else if (this.state.stock === '') {
			alert('请输入商品库存！');
			return false;
		} else {
			return true;
		}
	};

	changeName = e => {
		this.setState({
			name: e.target.value
		})
	};

	changeSubtitle = e => {
		this.setState({
			subtitle: e.target.value
		})
	};

	changeCategoryId = value => {
		this.setState({
			categoryId: value
		});
	};

	changeCategoryParentId = value => {
		this.setState({
			categoryParentId: value
		})
	};

	changePrice = e => {
		this.setState({
			price: e.target.value
		})
	};

	changeStock = e => {
		this.setState({
			stock: e.target.value
		})
	};

	changeSubImages = item => {
		let subImages = [...this.state.subImages];
		subImages.push(item);
		this.setState({
			subImages
		})
	};

	removeImage = item => {
		let subImages = [...this.state.subImages];
		let index = subImages.findIndex(value => item === value);
		subImages.splice(index, 1);
		this.setState({
			subImages
		})
	};

	changeEditor = detail => {
		this.setState({
			detail
		})
	};

	render() {
		return (
			<div className="product-save-form form-wrap row">
				<div className="form-horizontal">
					<div className="form-group">
						<label
							htmlFor="name"
							className="col-md-2 control-label"
						>
							商品名称
						</label>
						<div className="col-md-5">
							<input
								type="text"
								id="name"
								className="form-control"
								name="name"
								placeholder="请输入商品名称"
								autoComplete="off"
								value={this.state.name}
								onChange={this.changeName}
								disabled={this.state.onlyRead}
							/>
						</div>
					</div>
					<div className="form-group">
						<label
							htmlFor="subtitle"
							className="col-md-2 control-label"
						>
							商品描述
						</label>
						<div className="col-md-5">
							<input
								type="text"
								id="subtitle"
								className="form-control"
								name="subtitle"
								placeholder="请输入商品描述"
								autoComplete="off"
								value={this.state.subtitle}
								onChange={this.changeSubtitle}
								disabled={this.state.onlyRead}
							/>
						</div>
					</div>
					<div className="form-group">
						<label
							className="col-md-2 control-label"
						>
							所属分类
						</label>
						<SaveSelect
							categoryParentId={this.state.categoryParentId}
							changeCategoryParentId={this.changeCategoryParentId}
							categoryId={this.state.categoryId}
							changeCategoryId={this.changeCategoryId}
							disabled={this.state.onlyRead}
						/>
					</div>
					<div className="form-group">
						<label
							htmlFor="price"
							className="col-md-2 control-label"
						>商品价格
						</label>
						<div className="col-md-3">
							<div className="input-group">
								<input
									type="number"
									className="form-control"
									id="price"
									placeholder="价格"
									name="price"
									value={this.state.price}
									onChange={this.changePrice}
									disabled={this.state.onlyRead}
								/>
								<div className="input-group-addon">元</div>
							</div>
						</div>
					</div>
					<div className="form-group">
						<label
							htmlFor="stock"
							className="col-md-2 control-label"
						>商品库存
						</label>
						<div className="col-md-3">
							<div className="input-group">
								<input
									type="number"
									className="form-control"
									id="stock"
									placeholder="库存"
									name="stock"
									value={this.state.stock}
									onChange={this.changeStock}
									disabled={this.state.onlyRead}
								/>
								<div className="input-group-addon">件</div>
							</div>
						</div>
					</div>
					<div className="form-group">
						<label
							htmlFor="stock"
							className="col-md-2 control-label"
						>商品图片
						</label>
						<SaveFormUpload
							onChange={this.changeSubImages}
							removeImage={this.removeImage}
							subImages={this.state.subImages}
							disabled={this.state.onlyRead}
						/>
					</div>
					<div className="form-group">
						<label
							htmlFor="stock"
							className="col-md-2 control-label"
						>商品详情
						</label>
						<div className="col-md-10">
							<div className="input-group save-editor-container">
								<SaveEditor
									flag={this.state.flag}
									value={this.state.detail}
									changeEditor={this.changeEditor}
									disabled={this.state.onlyRead}
								/>
							</div>
						</div>
					</div>
					{
						this.state.onlyRead ?
							''
							:
							<div className="form-group">
								<label className="col-md-2"></label>
								<div className="col-md-10">
									<div className="input-group">
										<button
											className="btn btn-primary"
											onClick={this.formSubmit}
										>
											提交
										</button>
									</div>
								</div>
							</div>
					}
				</div>
			</div>
		);
	}
}

export default withRouter(SaveForm);